const n = `<!--
 * @Description: 按钮示例文件
-->
<template>
  <s-form label-width="8em" colon="：">
    <s-form-item label="是否多选">
      <s-radio-group
        v-model="fileButtonConfig.multiple"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="组件示例">
      <s-file-button
        ref="fileButton"
        v-model="fileButtonConfig.files"
        tip="请选择需要上传的文件"
        :multiple="fileButtonConfig.multiple"
      >
        <template #operation>
          <s-button variant="plain" @click="handleResetFiles">重置</s-button>
        </template>
      </s-file-button>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import { type FileButtonInstance, type FileValue } from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class ButtonDemo extends Vue {
  $refs!: {
    fileButton?: FileButtonInstance;
  };

  /**
   * @description: 文件选择组件配置
   * @private
   * @type {Object}
   */
  fileButtonConfig = {
    multiple: false, // 是否多选
    files: null as FileValue, // 文件
  };

  /**
   * @description: 处理重置文件
   * @private
   * @returns
   */
  handleResetFiles(): void {
    const { fileButton } = this.$refs;
    fileButton?.clear();
  }
}
<\/script>

<style lang="scss" scoped></style>
`; export { n as default };
